<template>
    <el-header>
      <div class="nav-container">
        <div class="items">
          <router-link to="/" tag="el-menu-item" class="item">首页</router-link>
          <router-link to="/products" tag="el-menu-item" class="item">产品列表</router-link>
          <router-link to="/cart" tag="el-menu-item" class="item">购物车</router-link>
        </div>
      </div>
    </el-header>
  </template>
  
  <script>
  export default {
    name: 'Navbar'
  };
  </script>
  
  <style>
  .items{
    background-color:"#eee"; 
    line-height: 60px;
    margin-left: -20px;
  }
  .item{
    margin-left: 20px;
  }

  .el-header {
    background-color: #eee; 
    border-bottom: 1px solid #d3dce6;
  }
  
  .nav-container {
    max-width: 960px; 
    margin: 0 auto; /* 水平居中 */
    display: flex;
    justify-content: center; /* 使子元素居中 */

  }

  </style>
  